<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>index</title>

		<!-- ********** core ********** -->

		<link rel="stylesheet" href="/css/common.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />

		<!-- ********** swiper ********** -->
		<link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" />
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>

		<!-- jquery -->
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

		<style>
			/* 首页-swiper
            ================================================== */

			.animate-up {
				transition: all ease-in-out 0.3s;
				-webkit-transition: all ease-in-out 0.3s;
			}

			.animate-up-wrap:hover .animate-up,
			.animate-up:hover {
				transform: translate3d(0, -10px, 0);
				-webkit-transform: translate3d(0, -10px, 0);
			}

			.animate-left {
				transition: all ease-in-out 0.3s;
				-webkit-transition: all ease-in-out 0.3s;
			}

			.animate-left-wrap:hover .animate-left,
			.animate-left:hover {
				transform: translate3d(6px, 0, 0);
				-webkit-transform: translate3d(6px, 0, 0);
			}

			.animate-right {
				transition: all ease-in-out 0.3s;
				-webkit-transition: all ease-in-out 0.3s;
			}

			.animate-right-wrap:hover .animate-right,
			.animate-right:hover {
				transform: translate3d(-10px, 0, 0);
				-webkit-transform: translate3d(-10px, 0, 0);
			}
			.swiper-button-next:after,
			.swiper-button-prev:after {
				font-size: 1rem !important;
			}

			.swiper-button-next,
			.swiper-button-prev {
				color: var(--bs-white) !important;
			}

			.mySwiper .swiper-slide-active .hover-fadeInUp {
				transform: translateY(0);
				transition: transform 1s;
			}

			#swiperHome .swiper-button-prev,
			#swiperHome .swiper-button-next {
				position: relative;
				margin-top: 0;
				top: auto !important;
				left: auto !important;
				bottom: auto !important;
				padding-left: 0 !important;
				height: auto !important;
			}

			#swiperHome .swiper-pagination {
				color: var(--bs-white) !important;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				font-size: 0.875em;
				font-weight: 500;
				color: #0e0e0e;
				pointer-events: none;
				width: auto !important;
			}

			@media (max-width: 576px) {
				#swiperHome .swiper-pagination-wrap {
					right: 0 !important;
				}
			}

			#swiperHome .swiper-pagination .swiper-pagination-current,
			#swiperHome .swiper-pagination .swiper-pagination-total {
				width: 2rem;
				text-align: center;
			}

			#swiperHome .swiper-button-prev:after,
			#swiperHome .swiper-button-next:after {
				content: none !important;
			}

			/* 页码
            ================================================== */

			#swiperHome .swiper-pagination-fraction {
				padding-left: 0 !important;
			}

			#swiperHome .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
				opacity: 0;
				-webkit-transform: translateY(-100%);
				-ms-transform: translateY(-100%);
				transform: translateY(-100%);
			}

			#swiperHome .swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
				-webkit-transform: translateY(100%);
				-ms-transform: translateY(100%);
				transform: translateY(100%);
			}

			#swiperHome .swiper-pagination-bullet:not(:first-child) {
				position: absolute;
				top: 0;
				left: 0;
			}

			#swiperHome .swiper-pagination-bullet {
				color: var(--bs-white) !important;
				width: auto;
				height: auto;
				background-color: transparent;
				will-change: transform, opacity;
				-webkit-transition: opacity 0.3s ease, -webkit-transform 0.35s ease;
				transition: opacity 0.3s ease, -webkit-transform 0.35s ease;
				-o-transition: transform 0.35s ease, opacity 0.3s ease;
				transition: transform 0.35s ease, opacity 0.3s ease;
				transition: transform 0.35s ease, opacity 0.3s ease, -webkit-transform 0.35s ease;
			}

			#swiperHome .swiper-pagination-bullet-active {
				background: transparent !important;
			}
		</style>
	</head>

	<body>
		<!--********** banner-swiper **********-->
		<div class="swiper mySwiper w-100 position-relative d-none d-sm-block" id="swiperHome">
			<div class="swiper-wrapper z-1">
				<!-- pc -->
				<div class="swiper-slide position-relative px-5 vh-100 d-none d-md-block bg-cover bg-center" style="background: url(//qn1.10soo.net/assets24/20240510110145.png)"></div>

				<div class="swiper-slide position-relative px-7r vh-100 d-none d-md-block" style="background: url(//qn1.10soo.net/assets24/20240510110232.png)"></div>

				<div class="swiper-slide position-relative px-7r vh-100 d-none d-md-block" style="background: url(//qn1.10soo.net/assets24/20240510110250.png)"></div>
			</div>
			<!-- 页码 -->
			<div class="position-absolute b-0 d-md-flex swiper-pagination-wrap d-none" style="top: 90% !important; right: 7% !important">
				<div class="swiper-button-prev animate-right">
					<svg width="26" height="11" viewBox="0 0 26 11" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M5.5 1L1 5.5L5.5 10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
						<path d="M19 5.5H1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
				</div>
				<div class="swiper-pagination position-relative mx-4" style="bottom: auto !important"></div>
				<div class="swiper-button-next animate-left">
					<svg width="26" height="11" viewBox="0 0 26 11" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M20.5 1L25 5.5L20.5 10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
						<path d="M7 5.5H25" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
				</div>
			</div>
		</div>

		<script>
			// 第一屏的swiper
			var swiperLoaded = false,
				swiperPagination = null;
			const swiperHome = new Swiper('#swiperHome', {
				// autoplay: {
				//     delay: 5000,
				// },
				loop: true,
				pagination: {
					el: '#swiperHome .swiper-pagination',
					type: 'custom',
					renderCustom: function (swiper, current, total) {
						if (!swiperLoaded) {
							swiperLoaded = true;

							let h = '';
							for (let i = 1; i <= total; i++) {
								if (i == current) {
									h += '<span class="swiper-pagination-bullet swiper-pagination-bullet-active">' + i + '</span>';
								} else {
									h += '<span class="swiper-pagination-bullet">' + i + '</span>';
								}
							}
							h += '<span class="mx-2">/</span>' + total;
							return h;
						}
					},
				},
				navigation: {
					nextEl: '#swiperHome .swiper-button-next',
					prevEl: '#swiperHome .swiper-button-prev',
				},
				on: {
					slideChange: (swiper) => {
						swiperPagination = $('.swiper-pagination');
						if (swiperLoaded) {
							let prevBullet = swiperPagination.find('.swiper-pagination-bullet').eq(swiper.previousIndex - 1);
							prevBullet.removeClass('swiper-pagination-bullet-active');

							let activeBullet = swiperPagination.find('.swiper-pagination-bullet').eq(swiper.realIndex);
							activeBullet.addClass('swiper-pagination-bullet-active');
						}
					},
				},
				scrollbar: false,
			});
		</script>
	</body>
</html>
